<!DOCTYPE html>
<html lang="en">

<?php

use PhpYes\Apps;

?>

<head>
  <meta charset="UTF-8">
  <title>
    <?php
    $prefix = \PhpYes\Apps::getAdminPageTitlePrefix();
    echo "{$prefix} - 用户登陆";
    ?>
  </title>

  <style>
    form#loginForm {
      padding: 20px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid silver;
      background: white;
    }
    form#loginForm>.line+.line {
      margin-top: 20px;
    }
    form#loginForm>.line>input {
      display: inline-block;
      font-size: 16px;
      width: 300px;
      margin: 0;
      padding: 4px 2px 4px 4px;
      border: 1px solid silver;
      box-sizing: border-box;
    }
    form#loginForm>.line.submit>button {
      box-sizing: border-box;
      margin: 0;
      padding: 4px 12px;
      vertical-align: bottom;
      font-size: 14px;
    }
    form#loginForm>.line.submit>a {
      vertical-align: bottom;
      margin-left: 10px;
      font-size: 15px;
    }
    form#loginForm .errmsg {
      font-size: 10px;
      color: red;
    }
  </style>
</head>

<body>
  <form id="loginForm" method="post" data-referer="<?php echo empty($this->data['referer']) ? '' : trim($this->data['referer']); ?>">
    <div class="line username">
      <input type="text" name="username" placeholder="用户名" />
      <div class="errmsg" style="display: none;"></div> <!-- 481 -->
    </div>
    <div class="line password">
      <input type="password" name="password" placeholder="密码" />
      <div class="errmsg" style="display: none;"></div> <!-- 482 -->
    </div>
    <div class="line errmsg" style="display: none;"></div>
    <div class="line submit">
      <button type="submit">登录</button>
      <a href="/user/register">注册账号</a>
      <a href="/user/register">找回密码</a>
    </div>
  </form>

  <script src="/wgx_admin_static/jquery-3.6.1.min.js"></script>
  <script src="/wgx_admin_static/layer/3.5.1/layer.js"></script>
  <script>
    jQuery(function ($) {
      $('form#loginForm').on('focusin', 'input', function (e) {
        var line = $(this).closest('.line');
        line.find('.errmsg').hide();
        line.closest('form#loginForm').find('.line.errmsg').hide();
      });
      $('form#loginForm').submit(function (e) {
        e.preventDefault();
        e.stopPropagation();
        /** @type {JQuery} */
        var jForm = $('form#loginForm');
        var username = jForm.find('input[name="username"]').val().trim();
        if (!username) {
          jForm.find('.line.username>.errmsg').text('请填写用户名!').show();
          return;
        }
        /** @type {String} */
        var password = jForm.find('input[name="password"]').val().trim();
        if (!password) {
          jForm.find('.line.password>.errmsg').text('请填写密码!').show();
          return;
        }

        var loading = layer.load(2);
        $.ajax({
          method: 'POST',
          url: window.location.pathname,
          data: {
            username: username,
            password: password
          },
          dataType: 'json',
          success: function (data, textStatus, jqXHR) {
            // console.log(data);
            layer.close(loading);
            if (data && data.code) {
              var code = parseInt(data.code);
              if (code < 400) {
                layer.msg('登录成功!', { time: 1000 }, function () {
                  if (window.parent && window.parent !== window) {
                    var selfIdx = window.parent.layer && window.parent.layer.getFrameIndex(window.name) || 0;
                    if (selfIdx) {
                      window.parent.layer.close(selfIdx);
                      window.parent.location.reload(true);
                      return;
                    }
                  }
                  var referer = jForm.data('referer');
                  if (referer) { referer = referer.trim(); }
                  if (!referer) { referer = '/'; }
                  window.location.href = referer;
                });
              } else {
                if (code == 481) {
                  jForm.find('.line.username>.errmsg').text(data && data.msg || '服务器错误，请稍后重试!').show();
                } else if (code == 482) {
                  jForm.find('.line.password>.errmsg').text(data && data.msg || '服务器错误，请稍后重试!').show();
                } else {
                  jForm.find('.line.errmsg').text(data && data.msg || '服务器错误，请稍后重试!').show();
                }
              }
            } else {
              layer.alert(data && data.msg || '服务器错误，请稍后重试!', { title: '错误提示', icon: 0 });
            }
          },
          error: function (jqXHR, textStatus, errorThrown) {
            layer.close(loading);
            layer.alert('网络错误，请稍后重试!', { title: '错误提示', icon: 0 });
          }
        });
      });
    });
  </script>
</body>

</html>